<!-- 远程复制 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月22日 22:53:39 -->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane key="fuZhiMoKuai" tab="复制模块">
      <a-card>
        <a-row align="middle">
          <a-col :span="16">
            <a-space>
              <a-button type="link" class="y-btn" @click="openJianLiXinDeFuZhiMoKuaiModal">
                <template #icon>
                  <plus-outlined />
                </template>
                建立新的复制模块
              </a-button>
              <!-- 弹窗 - 建立新的复制模块 -->
              <a-button type="link" class="y-btn y-close-fuzhi-fuwu" @click="">
                <template #icon>
                  <poweroff-outlined />
                </template>
                停止复制服务
              </a-button>
            </a-space>
          </a-col>
          <a-col :span="8">
            <a-input v-model:value="searchValueFuZhiMoKuai">
              <template #addonBefore>
                <search-outlined /> 搜索:
              </template>
            </a-input>
          </a-col>
        </a-row>
        <a-table bordered :data-source="dataSourceFuZhiMoKuai" :columns="columnsFuZhiMoKuai" class="y-table" :pagination="paginationFuZhiMoKuai">
        </a-table>
      </a-card>
    </a-tab-pane>

    <a-tab-pane key="fuZhiRenWu" tab="复制任务">
      <a-card>
        <a-row align="middle">
          <a-col :span="16">
            <a-space>
              <a-button type="link" class="y-btn" @click="openJianLiXinDeFuZhiRenWuModal">
                <template #icon>
                  <plus-outlined />
                </template>
                建立新的复制任务
              </a-button>
              <!-- 弹窗 - 建立新的复制任务 -->
            </a-space>
          </a-col>
          <a-col :span="8">
            <a-input v-model:value="searchValueFuZhiRenWu">
              <template #addonBefore>
                <search-outlined /> 搜索:
              </template>
            </a-input>
          </a-col>
        </a-row>
        <a-table bordered :data-source="dataSourceFuZhiRenWu" :columns="columnsFuZhiRenWu" class="y-table" :pagination="paginationFuZhiRenWu">
        </a-table>
      </a-card>
    </a-tab-pane>

    <a-tab-pane key="renWuJinDuJiLu" tab="任务进度记录">
      <a-card>
        <a-row align="middle">
          <a-col :span="16">
            <a-space>
              <a-button type="link" class="y-btn" @click="shuaXin">
                <template #icon>
                  <sync-outlined />
                </template>
                刷新
              </a-button>
              <a-button type="link" class="y-btn" @click="xiaZaiRiZhi">
                <template #icon>
                  <DownloadOutlined />
                </template>
                下载日志
              </a-button>
              <a-button type="link" class="y-btn" @click="qingKongRiZhi">
                <template #icon>
                  <DeleteOutlined />
                </template>
                清空日志
              </a-button>
            </a-space>
          </a-col>
          <a-col :span="8">
            <a-input v-model:value="searchValueRenWuJinDuJiLu">
              <template #addonBefore>
                <search-outlined /> 搜索:
              </template>
            </a-input>
          </a-col>
        </a-row>
        <a-table bordered :data-source="dataSourceRenWuJinDuJiLu" :columns="columnsRenWuJinDuJiLu" class="y-table" :pagination="paginationRenWuJinDuJiLu">
        </a-table>
      </a-card>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
const activeKey = ref('fuZhiMoKuai')

// -- 复制模块
const visibleJianLiXinDeFuZhiMoKuaiModal = ref(false)

const openJianLiXinDeFuZhiMoKuaiModal = () => {
  visibleJianLiXinDeFuZhiMoKuaiModal.value = true
}

const searchValueFuZhiMoKuai = ref('')

// 表格列
const columnsFuZhiMoKuai = ref([
  {
    title: '模块名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '路径',
    dataIndex: 'path',
    key: 'path',
    align: 'center',
    sorter: {
      compare: (a, b) => a.path.localeCompare(b.path),
      multiple: 2
    }
  },
  {
    title: '允许的主机',
    dataIndex: 'yunXuDeZhuJi',
    key: 'yunXuDeZhuJi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.yunXuDeZhuJi.localeCompare(b.yunXuDeZhuJi),
      multiple: 3
    }
  },
  {
    title: '权限',
    dataIndex: 'quanXian',
    key: 'quanXian',
    align: 'center',
    sorter: {
      compare: (a, b) => a.quanXian.localeCompare(b.quanXian),
      multiple: 4
    }
  }
])

// 表格数据
const dataSourceFuZhiMoKuai = ref([
  {
    key: '1',
    name: '系统管理',
    path: '/system',
    yunXuDeZhuJi: '*',
    quanXian: '系统管理'
  },
  {
    key: '2',
    name: '用户管理',
    path: '/user',
    yunXuDeZhuJi: '*',
    quanXian: '用户管理'
  }
])

// 分页
const paginationFuZhiMoKuai = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('远程复制 > 复制模块分页改变>>', page, pageSize)
  }
}

// -- 复制任务
const visibleJianLiXinDeFuZhiRenWuModal = ref(false)

const openJianLiXinDeFuZhiRenWuModal = () => {
  visibleJianLiXinDeFuZhiRenWuModal.value = true
}

const searchValueFuZhiRenWu = ref('')

// 表格列
const columnsFuZhiRenWu = ref([
  {
    title: '本地卷路径',
    dataIndex: 'benDiJuanLuJing',
    key: 'benDiJuanLuJing',
    align: 'center',
    sorter: {
      compare: (a, b) => a.benDiJuanLuJing.localeCompare(b.benDiJuanLuJing),
      multiple: 1
    }
  },
  {
    title: '复制方式',
    dataIndex: 'fuZhiFangShi',
    key: 'fuZhiFangShi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.fuZhiFangShi.localeCompare(b.fuZhiFangShi),
      multiple: 2
    }
  },
  {
    title: '服务器IP',
    dataIndex: 'fuWuQiIp',
    key: 'fuWuQiIp',
    align: 'center',
    sorter: {
      compare: (a, b) => a.fuWuQiIp.localeCompare(b.fuWuQiIp),
      multiple: 3
    }
  },
  {
    title: '模块名',
    dataIndex: 'moKuaiMing',
    key: 'moKuaiMing',
    align: 'center',
    sorter: {
      compare: (a, b) => a.moKuaiMing.localeCompare(b.moKuaiMing),
      multiple: 4
    }
  },
  {
    title: '计划任务',
    dataIndex: 'jiHuaRenWu',
    key: 'jiHuaRenWu',
    align: 'center',
    sorter: {
      compare: (a, b) => a.jiHuaRenWu.localeCompare(b.jiHuaRenWu),
      multiple: 5
    }
  }
])

// 表格数据
const dataSourceFuZhiRenWu = ref([
  {
    key: '1',
    benDiJuanLuJing: 'C:\\Users\\Administrator\\Desktop\\1.txt',
    fuZhiFangShi: '全量',
    fuWuQiIp: '192.168.1.1',
    moKuaiMing: 'test',
    jiHuaRenWu: 'test'
  }
])

// 分页
const paginationFuZhiRenWu = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('远程复制 > 复制任务分页改变>>', page, pageSize)
  }
}

// -- 任务进度记录
const searchValueRenWuJinDuJiLu = ref('')

// 表格列
const columnsRenWuJinDuJiLu = ref([
  {
    title: '操作',
    dataIndex: 'caoZuo',
    key: 'caoZuo',
    align: 'center',
    sorter: {
      compare: (a, b) => a.caoZuo.localeCompare(b.caoZuo),
      multiple: 1
    }
  },
  {
    title: '详细信息',
    dataIndex: 'xiangXiXinXi',
    key: 'xiangXiXinXi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.xiangXiXinXi.localeCompare(b.xiangXiXinXi),
      multiple: 2
    }
  },
  {
    title: '开始时间',
    dataIndex: 'kaiShiShiJian',
    key: 'kaiShiShiJian',
    align: 'center',
    sorter: {
      compare: (a, b) => a.kaiShiShiJian.localeCompare(b.kaiShiShiJian),
      multiple: 3
    }
  },
  {
    title: '终止时间',
    dataIndex: 'zhongZhiShiJian',
    key: 'zhongZhiShiJian',
    align: 'center',
    sorter: {
      compare: (a, b) => a.zhongZhiShiJian.localeCompare(b.zhongZhiShiJian),
      multiple: 4
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    sorter: {
      compare: (a, b) => a.status.localeCompare(b.status),
      multiple: 5
    }
  }
])

// 表格数据
const dataSourceRenWuJinDuJiLu = ref([
  {
    caoZuo: '复制任务',
    xiangXiXinXi: '复制任务',
    kaiShiShiJian: '2021-06-01',
    zhongZhiShiJian: '2021-06-01',
    status: '未完成'
  }
])

// 分页
const paginationRenWuJinDuJiLu = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('远程复制 > 任务进度记录分页改变>>', page, pageSize)
  }
}

const shuaXin = () => {
  console.log('远程复制 > 任务进度记录分页改变>> 刷新')
}
const xiaZaiRiZhi = () => {
  console.log('远程复制 > 任务进度记录分页改变>> 下载日志')
}
const qingKongRiZhi = () => {
  Modal.confirm({
    title: '确认操作',
    icon: h(ExclamationCircleOutlined),
    content: '确定要清空所有同步记录?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}
</script>

<style scoped lang='scss'>
.ant-row {
  margin-bottom: 10px;
}

.y-close-fuzhi-fuwu {
  color: red;
}
</style>